<!DOCTYPE html>
<html>
<head>
<title>Sample: Simple Container</title>
<!-- default container look and feel -->
<link rel="stylesheet" href="StyleSheets/gadgets.css">
<script type="text/javascript" src="Scripts/container/json.js"></script>
<script type="text/javascript" src="Scripts/container/ifpc.js"></script>
<script type="text/javascript" src="Scripts/container/cookies.js"></script>
<script type="text/javascript" src="Scripts/container/gadgets.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery-1.2.2.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.mouse.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.droppable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/ui/ui.sortable.js"></script>
<script type="text/javascript" src="Scripts/jQuery/interface.js"></script>
<style media="all" type="text/css">
html
{
	height: 100%;
}
img{
	border: none;
}
body
{
	background: #fff;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
}
.groupWrapper
{
	width: 32%;
	float: left;
	margin-right: 1%agg;
	min-height: 400px;
}
.serializer
{
	clear: both;
}
.groupItem
{
	margin-bottom: 20px;
}
.groupItem .itemHeader
{
	line-height: 28px;
	background-color: #DAFF9F;
	border-top: 2px solid #B5EF59;
	color: #000;
	padding: 0 10px;
	cursor: move;
	font-weight: bold;
	font-size: 16px;
	height: 28px;
	position: relative;
}

.groupItem .itemHeader a
{
	position: absolute;
	right: 10px;
	top: 0px;
	font-weight: normal;
	font-size: 11px;
	text-decoration: none;
}
.sortHelper
{
	border: 3px dashed #666;
	width: auto !important;
}
.groupWrapper p
{
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }
.columns
{
	width: 32%;
	float: left;
    margin: 4px;
    border: 1px solid #7aa5d6;
    height: 100%;
}

.gadget
{
	width: 300px;
    border: 1px solid #7aa5d6;
    padding: 0 3px;
}

.block { 
   border: 2px solid #0090DF;
   background-color: #68BFEF;
   width: 150px; 
   height: 70px;
   z-index: 1000;
}
.droppable-active {
	opacity: 1.0;
}
.droppable-hover {
	outline: 1px dotted black;
}

.sortHelper{
}

.sortableactive{

}


.sortablehover{

}

</style>



<script type="text/javascript">
var specUrl0 = 'http://www.udigraff.com/google/blackjack.xml';
var specUrl1 = 'http://localhost/iGoogle/xml/DynamicHeight.xml';

// This container lays out and renders gadgets itself.

function renderGadgets() {
  var gadget0 = gadgets.container.createGadget({specUrl: specUrl0});
  var gadget1 = gadgets.container.createGadget({specUrl: specUrl1});
  var gadget2 = gadgets.container.createGadget({specUrl: specUrl1});

  gadgets.container.addGadget(gadget0);
  gadgets.container.addGadget(gadget1);
  gadgets.container.layoutManager.setGadgetChromeIds(
      ['gadget-chrome-x', 'gadget-chrome-y', 'gadget-chrome-x']);

  //gadgets.container.renderGadget(gadget0);
  //gadgets.container.renderGadget(gadget1);
  //gadgets.container.renderGadget(gadget2);
};
</script>
</head>
<body>

  <h2>Sample: Simple Container</h2>
<div class="columns" id="sort3">
	<div class="block" id="div1">Arun
	</div>
	<div class="block" id="div2">Kumar
	</div>
</div>


<ul id="sort4">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	<li>Item 4</li>
</ul>


  
<script type="text/javascript">
$(document).ready(
	function () {
		//$('div.block').draggable();
		//$('div.columns').sortable({});
		$('#sort4').sortable({
			start: function(e,ui){
				alert("Started");
			},
			stop: function(e,ui){
				alert("Stopped");
			}
		});
		$('div.columns').sortable({
			start: function(e,ui){
				alert("Started");
			},
			stop: function(e,ui){
				alert("Stopped");
			}
		});
		//$('#sort3').sortable({});
		//$('div.columns').droppable({});
		//$('#sort4').sortable({});
	}
);
</script>


<div id="dragHelper" style="margin: 0px; overflow: hidden; position: absolute; display: none; cursor: move; list-style-type: none; list-style-image: none; list-style-position: outside; height: 89px; width: 316px; left: 262px; top: 162px; opacity: 0.9999;"/>
<div id="sortHelper" style="margin: 0px 0px 20px; display: none; width: 316px; height: 89px;" class=""> </div>
</body>
</html>
